/* need to organize */

.events {
    max-width: 45%;
    min-width: 45%;
    font-family: 'Nunito';
    text-align: center;
    padding: 25px;
    margin: 25px;
    align-items: center;
    border-radius: 100px 100px 100px 100px;
    border-style: double;
    display: flex;
    border-block-style: groove;
    border-block-width: thick;
    background: rgb(50,185,152);
    background: linear-gradient(30deg, rgba(50,185,152,1) 15%, rgba(147,255,214,1) 35%, rgba(50,185,152,1) 55%, rgba(147,255,214,1) 75%, rgba(50,185,152,1) 95%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#32b998",endColorstr="#32b998",GradientType=1);
    box-shadow: inset 0 0 9px 0  rgb(113, 36, 255);
    border-inline-color: rgb(113, 36, 255);
    border-block-color: green;
}

.events:hover {
    border-style: double;
    border-block-style: groove;
    border-block-width: thick;
    box-shadow: inset 360px 0px 10px 0px  rgba(0, 0, 0, 0.521)
                /* inset -500px 0px 0px 0px  rgba(0, 0, 0, 0.301); */
    ;
    border-inline-color: green;
    border-block-color: rgb(113, 36, 255);
    background: linear-gradient(45deg, #dd8af7, #dd8af7, #8aeef5, #fff2ba, #9ff8b2, #9ff8b2);
    animation: colorAnimationEvent 6s infinite;
    background-size: 600% 600%;
    transition: .5s ease-in-out;
}
.eventsAfter {
    transition: .5s ease-in-out; 
    background: linear-gradient(30deg, rgba(50,185,152,1) 15%, rgba(147,255,214,1) 35%, rgba(50,185,152,1) 55%, rgba(147,255,214,1) 75%, rgba(50,185,152,1) 95%);
    box-shadow: inset 0px 0px 0px 0px  rgba(0, 0, 0, 0.521);
}
.pm-rank {
    float: right;
    /* width: auto; */
    transition:  1s;
    /* rotate: 360deg; */
}
@keyframes colorAnimationEvent {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@media only screen and (max-width: 600px) {
    .events-title {
        text-align: center;
        align-content: center;
    }
    p.events-text {
        padding: unset;
        font-size: larger;
        text-align: center;
    }
    .events {
        align-items: center;
        display: block;
        border-radius: 25%;
        border-style: double;
        flex: 1;
        width: 75%;
        height: 75%;
        max-width: 250px;
        min-width: 200px;
        box-shadow: 0 0 15px 0  rgb(113, 36, 255);
    }
    p.events-text {
        padding: unset;
        font-size: larger;
        text-align: center;
    }
    img.events-banners {
        border-radius: 25%;
        border-style: double;
        border-block-end-color: rgb(0, 65, 50);
        box-shadow: 3px 3px 6px 2px rgb(0, 43, 4);
        flex: 1;
        height: auto;
        width: 75%;
    }
    img.events-banners-trans {
        flex: 1;
        width: 75%;
        height: auto;
    }
    ul.eventsList {
        margin: unset;
        justify-content: center;
        padding: unset;
    }
    div#inputContainer {
        margin: 0 0 0 10%;
    }
    div.Upcoming-event-form  {
        width: 75%; 
    }
    a.stream {
        flex: 1;
        width: 50%;
        height: auto;
        font-size: 20px;
        display: inline-block;
        text-align: center;
        padding: 0 5px 0 5px;
        margin: 5px 0 5px 0;
    }
    a.trailer {
        flex: 1;
        width: 50%;
        height: auto;
        font-size: 20px;
        display: inline-block;
        text-align: center;
        padding: 0 5px 0 5px;
        margin: 5px 0 5px 0;
    }
    input.inputNews {
        font-size: 15px !important;
        width: 20% !important;
        margin: 15% 0 0 1% !important;

        }
        input.inputNews {
            width: 10%;
            font-size: 20px;
            border-radius: 15px 15px 15px 15px;
                border-color: rgb(225, 145, 245);
                border-inline-color: rgb(113, 36, 255);
                border-width: 3px;
                position: absolute;
                top: 0;
                margin-top: 15%;
        
        }
        button.submit-btnNews {
            position: absolute;
            margin: 21.5% 0 0% 1%;
                font-size: 20px;
                background: rgb(50,185,152);
                background: -moz-linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
                background: -webkit-linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
                background: linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#32b998",endColorstr="#ffffff",GradientType=1);
                border-radius: 15px 15px 15px 15px;
                box-shadow: 0 0 3px 0 rgb(0, 196, 16);
                    transition: .3s;    
            }
}
img.events-banners:hover {
    cursor: pointer;
}
.events-title{
    padding-left: 50px;
    text-align: left;
}
.events-text {
    font-size: larger;
    padding-left: 50px;
    text-align: center;
}
.event-head {
    font-family: 'Nunito';
    text-align: center;
    align-content: center;
}
.eventTitle:hover {
    text-shadow: 3px 7px 7px #000000
}
.event-date {
    text-align: center;
    font-family: 'Nunito';
    font-size: large;
}
p.event-date {
    margin: 2% 0 -2% 0;
}
@media only screen and (max-width: 1000px) {
    b.event-date {
        font-size: 29px;
    }
    p.event-date {
        font-size: 29px;
    }
    .newsText {
         margin-top: 30px; 
            max-width: 20%; 
            font-size: 15px !important;
            margin-left: 4% !important;
        }
}
.events-banners-trans {
    flex: 0px;
    max-width: 300px;
    max-height: 300px;
    height: 300px;
    width: 300px;
    border-radius: 25%;

}
.events-banners-trans:hover {
    transform: scale3d(1.02, 1.02, 1.02); 
    transition: transform 0.3s ease;
}
.events-banners-trans:active {
    transform: scale3d(1.03, 1.03, 1.03); 
}
.events-banners {
    flex: 0px;
    border-radius: 25%;
    max-width: 300px;
    max-height: 300px;
    height: 300px;
    width: 300px;
    border-style: double;
    border-block-end-color: rgb(0, 65, 50);
    box-shadow: 3px 3px 6px 2px rgb(0, 43, 4);
}
.events-banners:hover {
    transform: scale3d(1.02, 1.02, 1.02); 
    transition: transform 0.3s ease
}
.events-banners:active {
    transform: scale3d(1.03, 1.03, 1.03); 
}
.eventsList {
    display: flex;
    justify-content: space-between;
    padding: 0 30px 0 30px;
    padding-inline-start: unset;
}
#EventDateUpcoming, #EventLocationUpcoming, #EventTitleUpcoming, #EventUrlUpcoming, #EventImageUpcoming, #EventDescriptionUpcoming, #EventPassUpcoming, #EventLocationUpcomingg {
    display: inline;
}
#textInputUpcomingTitle, #textInputUpcomingDate, #textInputUpcomingLocation, #textInputUpcomingUrl, #textInputUpcomingImage, #textInputUpcomingDescription, #textPassUpcoming {
    margin: 10px;
}
.Upcoming-event-form {

    font-size: 25px;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0 0 3px 0 rgb(0, 196, 16);
        transition: .3s;
        border-inline-color: rgb(113, 36, 255);
        border-block-color: green;
        border-style: double;
        border-block-style: groove;
       border-block-width: thick;
       background: rgb(50,185,152);
       background: -moz-linear-gradient(30deg, rgba(50,185,152,1) 15%, rgba(147,255,214,1) 35%, rgba(50,185,152,1) 55%, rgba(147,255,214,1) 75%, rgba(50,185,152,1) 95%);
       background: -webkit-linear-gradient(30deg, rgba(50,185,152,1) 15%, rgba(147,255,214,1) 35%, rgba(50,185,152,1) 55%, rgba(147,255,214,1) 75%, rgba(50,185,152,1) 95%);
       background: linear-gradient(30deg, rgba(50,185,152,1) 15%, rgba(147,255,214,1) 35%, rgba(50,185,152,1) 55%, rgba(147,255,214,1) 75%, rgba(50,185,152,1) 95%);
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#32b998",endColorstr="#32b998",GradientType=1);
       box-shadow: 0 0 9px 0  rgb(113, 36, 255);
       border-inline-color: rgb(113, 36, 255);
       border-block-color: green;
       height: fit-content; 
       width: 10%;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
}
.Upcoming-event-form:hover {
    border-style: double;
    border-block-style: groove;
   border-block-width: thick;
   border-inline-color: green;
   border-block-color: rgb(113, 36, 255);
}
.Upcoming-event-form-button {
    margin: 8px 50px 0 50px;
    font-size: 30px;
background: rgb(50,185,152);
background: -moz-linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
background: linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#32b998",endColorstr="#ffffff",GradientType=1);    border-radius: 15px 15px 15px 15px;
padding-left: 10px;
padding-right: 10px;
    box-shadow: 0 0 3px 0 rgb(0, 196, 16);
        transition: .3s;
        border-block-color: green;
        border-style: double;
        border-block-style: groove;
       border-block-width: thick;
}
.Upcoming-event-form-button:hover, .Upcoming-event-form-button:focus {
    box-shadow: 0 0 20px 0  rgb(167, 83, 247);
    border-inline-color: rgb(113, 36, 255);
    border-block-color: green;
}
.submit-btn {
    font-size: 20px;
    background: rgb(50,185,152);
    background: -moz-linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
    background: linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#32b998",endColorstr="#ffffff",GradientType=1);
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0 0 3px 0 rgb(0, 196, 16);
        transition: .3s;
        margin: 0px 0px 10px 0px;
}
.submit-btn:hover {
    color: rgb(60, 42, 177);
    box-shadow: 2px 2px 5px 1px rgb(0, 43, 4);
}
input#textInputUpcomingTitle {
    display: inline-flex;
    width: 50%;
}
input#textInputUpcomingDate { 
    display: inline-flex;
    width: 50%;
}
input#textInputUpcomingLocation { 
    display: inline-flex;
    width: 50%;
}
input#textInputUpcomingUrl { 
    display: inline-flex;
    width: 50%;
}
input#textInputUpcomingImage { 
    display: inline-flex;
    width: 50%;
}
input#textInputUpcomingDescription { 
    display: inline-flex;
    width: 50%;
}
input#textPassUpcoming {
    display: inline-flex;
    width: 50%; 
}
div.addEventSec {
    font-size: 20px;
}
form#upcomingSub {
    text-align: center;
    margin: 10px 0 10px 0;
}


.trailer {
    font-size: 25px;
    background: rgb(50,185,152);
    background: -moz-linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
    background: linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#32b998",endColorstr="#ffffff",GradientType=1);
    border-radius: 15px 15px 15px 15px;
    padding-left: 10px;
    padding-right: 10px;
    transition:  .3s;
    box-shadow: inset 0 0 3px 0 rgb(50,185,152);
        border-inline-color: rgb(113, 36, 255);
        border-block-color: green;
        border-style: double;
        border-block-style: groove;
       border-block-width: thick;
       margin: 0px 15px 0 15px;
}
.trailer:hover {
    transition: .75s ease-in-out;
    color: rgb(0, 0, 0);
        border-style: double;
        border-block-style: groove;
       border-block-width: thick;
       box-shadow:inset 0px 0px 0px 300px rgba(0, 0, 0, 0.438);
       background: transparent
}
.trailer:active {
    transition: none;
    box-shadow: 4px 4px 7px 3px rgb(0, 43, 4);
    color: rgb(27, 0, 199);
    background: rgba(0, 0, 0, 0.322);

}
.trailerAfter {
    transition: .5s ease-in-out; 
    background: linear-gradient(30deg, rgba(50,185,152,1) 15%, rgba(147,255,214,1) 35%, rgba(50,185,152,1) 55%, rgba(147,255,214,1) 75%, rgba(50,185,152,1) 95%);
    box-shadow: inset 0px 0px 0px 0px  rgba(0, 0, 0, 0.521);
}

.stream {
    font-size: 25px;
background: rgb(50,185,152);
background: -moz-linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
background: linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#32b998",endColorstr="#ffffff",GradientType=1);
border-radius: 15px 15px 15px 15px;
padding-left: 10px;
padding-right: 10px;
transition:  .3s;
box-shadow: inset 0 0 3px 0 rgb(50,185,152);
    border-inline-color: rgb(113, 36, 255);
    border-block-color: green;
    border-style: double;
    border-block-style: groove;
   border-block-width: thick;
   margin: 0px 15px 0 15px;
}
.stream:hover {
transition: .75s ease-in-out;
color: rgb(0, 0, 0);
    border-style: double;
    border-block-style: groove;
   border-block-width: thick;
   box-shadow:inset 0px 0px 0px 300px rgba(0, 0, 0, 0.438);
   background: transparent
}
.stream:active {
transition: none;
box-shadow: 4px 4px 7px 3px rgb(0, 43, 4);
color: rgb(27, 0, 199);
background: rgba(0, 0, 0, 0.322);

}
.streamAfter {
transition: .5s ease-in-out; 
background: linear-gradient(30deg, rgba(50,185,152,1) 15%, rgba(147,255,214,1) 35%, rgba(50,185,152,1) 55%, rgba(147,255,214,1) 75%, rgba(50,185,152,1) 95%);
box-shadow: inset 0px 0px 0px 0px  rgba(0, 0, 0, 0.521);
}
.newsLBody {

    display: grid;

}
input.inputNews {
    width: 7%;
    font-size: 20px;
    border-radius: 15px 15px 15px 15px;
        border-color: rgb(225, 145, 245);
        border-inline-color: rgb(113, 36, 255);
        border-width: 3px;
        position: absolute;
        top: 0;
        margin-top: 8.5%;
        text-align: center;
        margin-left: 5%;

}
.submit-btnNews {
position: absolute;
    font-size: 25px;
    background: rgb(50,185,152);
    background: -moz-linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
    background: linear-gradient(0deg, rgba(50,185,152,1) 35%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#32b998",endColorstr="#ffffff",GradientType=1);
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0 0 3px 0 rgb(0, 196, 16);
    top: 0;
        transition: .3s;     
        margin-top: 10.5%;   
        margin-left: 5.5%;
}
.submit-btnNews:hover {
    color: rgb(167, 83, 247);
    border-style: double;
    border-block-style: groove;
   box-shadow: 0 0 20px 0  rgb(167, 83, 247);
   border-inline-color: rgb(113, 36, 255);
   border-block-color: green;    
    cursor: pointer;
}
.submit-btnNews:active {
color: rgb(27, 0, 199);
}

#root {
    display: inline-block;
    left: 0;
    top: 0;
}
.newsText {
top: 0; 
position: absolute;
 margin-top: 6.1%; 
    max-width: 20%; 
    font-size: 30px;
    margin-left: 1%;
}